import React, { Component } from 'react';
// 引入路由
import { BrowserRouter as Router, Routes, Route, Navigate, NavLink } from 'react-router-dom';

import Home from '../components/page/home'
import Page1 from '../components/page/page1'
import Page2 from '../components/page/page2'

import './index.css';

// Router组件包裹整个视图
// Link实现路由调整
// Routes包裹Route组件的匹配规则
// exact属性表示精确匹配
// Route组件的属性变为element(之前版本是component),且需包裹在Routes里,element值为标签形式
// Navigate重定向组件
class RouterConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <Router>
                <div className='myApp'>
                    app页面
                    <ul>
                        <li>
                            <NavLink to="/home">home组件</NavLink>
                            <NavLink to="/page1">page1组件</NavLink>
                            <NavLink to="/page2">page2组件</NavLink>
                        </li>
                    </ul>

                    <Routes>
                        <Route path='/' exact element={<Navigate to="/home"/>} />
                        <Route path='/home' exact element={<Home/>} />
                        <Route path='/page1' element={<Page1/>} />
                        <Route path='/page2' element={<Page2/>} />
                    </Routes>
                </div>
            </Router>
        );
    }
}

export default RouterConfig;